<template>
  <div class="side-list">
    <div class="title">晒图</div>
    <div class="option-box">
      <div class="sort-by">
        <span class="sort" :class="{ active: is_selected == 1 }" @click="editIsSelected(1)">推荐</span>
        <span class="line">|</span>
        <span class="new" :class="{ active: is_selected == 0 }" @click="editIsSelected(0)">最新</span>
      </div>
      <span class="video" :class="{ active: type == 'video_post' }" @click="editType">视频</span>
    </div>
    <side-item :type="side.type == 5 ? 'video_post' : 'all'" :sideInfo="side" v-for="(side, index) in activityList" :key="index"></side-item>
  </div>
</template>

<script>
import SideItem from './SideItem.vue'
export default {
  props: {
    activityList: Array,
    is_selected: Number,
    type: String
  },
  components: {
    SideItem
  },
  methods: {
    editType() {
      if (this.type == 'all') {
        this.$emit('edit-type', 'video_post')
      } else {
        this.$emit('edit-type', 'all')
      }
    },
    editIsSelected(val) {
      if (val == this.is_selected) return
      this.$emit('edit-selected', val)
    }
  }
}
</script>

<style lang="less" scoped>
.side-list {
  margin-top: 10px;
  padding: 0 10px;
  background-color: #fff;

  .title {
    padding: 10px 0;
    font-size: 18px;
    color: #333333;
    font-weight: 700;
  }

  .option-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: #999;

    .sort-by {
      .line {
        padding: 0 5px;
      }

      span.active {
        font-weight: 700;
        color: #d94648;
      }
    }
    .video {
      padding: 3px 15px;
      border-radius: 999px;

      &.active {
        color: #fff;
        background-color: #d94648;
      }
    }
  }
}
</style>
